<template>
	<my-template>
		<div class="map">
			<div class="map-view">
				<div class="map-search">
					<el-form :model="form">
						<el-input v-model="form.search" placeholder="请输入搜索内容" class="input-with-select">
							<el-button slot="append" icon="el-icon-search"></el-button>
						</el-input>
					</el-form>
				</div>
				<ElectricalLists ref="electricalLists" :getAttribute="getAttribute"
                         @set-tuceng="setTuceng" @set-tuceng-type="setTucengType"
                         @set-nature="setNature"
                         @tuceng-data-all="tucengDataAll"
                         @clear-tuceng="clearTuceng"
                         :resetNew="resetNew"
                         @nature-change="natureChange" @attribute-change="attributeChange"></ElectricalLists>
				<div class="maplist-right">
						<el-form v-if="dvBoxFlag == 'Chart' && dataTypeNew === '3-2' ">
							<el-radio-group class="cut" v-model="chart">
								<el-radio style="width: 70px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" label="bar">柱状图</el-radio>
								<el-radio style="width: 70px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" label="pie">饼状图</el-radio>
								<el-radio style="width: 70px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" label="line">折线图</el-radio>
                <el-radio style="width: 70px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" label="label">标 签</el-radio>
							</el-radio-group>
						</el-form>
					</div>
					<div id="mapDiv" style="
					  overflow: hidden;
						position: absolute;
						top: 0px;
						left: 0px;
						height: 100%;
						width: 100%;
						z-index: 0;
					  "></div>
					<div id="popup" ref="popup" style="width: 500px; height: 300px"></div>

<!--					<div v-show="chart == 'bar' || chart == 'pie' || chart == 'label'"
						style="position: absolute;top: 1%;right: 110px;width: 6%;height: 22%;z-index: 1;"
						v-if="dvBoxFlag == 'Chart'">
						<el-card style="width: 100%;height: 100%;">
              <el-row style="width: 100%;height: 100%;">
                <el-col :span="14" style="height: 100%;">
                  <el-slider vertical height="130px" v-model="year" :step="1" :min="2013" :max="2019" @change="changeEchartsYear"></el-slider>
                </el-col>
                <el-col :span="10">
                  <div style="font-weight: bolder;">{{year}}</div>
                </el-col>
              </el-row>
&lt;!&ndash;							<div style="position: absolute;right: 25%;top: 13%;font-weight: bolder;">年份: {{year}}年</div>
							<div style="position: absolute;bottom: 1%;width: 75%;">
								<el-slider vertical height="100px" v-model="year" :step="1" :min="2017" :max="2019"></el-slider>
							</div>&ndash;&gt;
						</el-card>
					</div>-->
				</div>

      <div class="listDiv2" v-if="dvBoxFlag == 'Chart' && dataTypeNew === '3-2' || dataTypeNew === '1-2' " v-show="chart == 'bar' || chart == 'pie' || chart == 'label'">
        <el-row style="width: 100%;height: 100%;">
<!--          <el-col :span="6" style="height: 100%;line-height: 46px;">
            <div style="font-weight: bolder;text-align: center;">{{year}}</div>
          </el-col>-->
          <el-col :span="2">
            <div style="text-align: center;margin-top: 7px;cursor: pointer;">
              <img src="../../../assets/map/left.png" @click="left">
            </div>
          </el-col>
          <el-col :span="20">
            <div class="theSteps">
<!--              <el-slider v-model="year" :step="1" :min=min :max=max @change="changeEchartsYear"></el-slider>-->
              <el-steps :active="active" finish-status="finish" simple>
                <el-step
                    v-for="(year,index) in yList"
                    :key="index"
                    :title="year"
                    @click.native="getYear(year, index)"
                ></el-step>
              </el-steps>
            </div>
          </el-col>
          <el-col :span="2">
            <div style="text-align: center;margin-top: 7px;cursor: pointer;">
              <img src="../../../assets/map/right.png" @click="right">
            </div>
          </el-col>
        </el-row>
      </div>

        <div class="listDiv" v-if="dvBoxFlag != 'error' && tableDataList.length != 0">
          <el-input style="width: 94%;height: 2%;margin: 3%;"
              placeholder="请输入想要搜索的内容"
              v-model="inputValue"
              @keyup.enter="search()"
              clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <div style="width: 94%;height: 86%;margin: 3%;">
            <el-table
                :data="tableDataList"
                @row-click="clickData"
                highlight-current-row
                border
                height="100%"
                style="width: 100%;height: 100%">
              <el-table-column v-for="(item,index) in tableTitle"
                               :prop="item.shopName"
                               :label="item.shopName"
                               show-overflow-tooltip
              >
              </el-table-column>
            </el-table>
          </div>
        </div>


      <!--  地图切换    -->
      <mapSwitch class="map-layers-cut" :defaultTab="1" :defaultList="tabList" @on-click="mapTab"></mapSwitch> <!-- 地图切换 -->

				<div class="buttonBox">
					<div>
						<div
							style="position: absolute; right: 5px; height: 50px; width: 320px; border: 1px solid #005aca;background-color: #F5F7FA;border-radius: 4px;">
						</div>
            <div class="dv-border-box1" @click="png()">
              <div class="el-icon-picture-outline"></div>
              <div>打印</div>
            </div>
            <div class="lsw-split-line"></div>

						<div class="dv-border-box1" v-if="dvBoxFlag != 'Chart' " @click="dvBoxClick('Chart')">
							<div class="el-icon-picture-outline"></div>
							<div>图表</div>
						</div>
						<div class="dv-border-box1-select" v-if="dvBoxFlag == 'Chart' " @click="dvBoxClick('')">
							<div class="el-icon-picture-outline"></div>
							<div>图表</div>
						</div>

						<div class="lsw-split-line"></div>


						<div class="dv-border-box1" v-if="dvBoxFlag != 'error' " @click="dvBoxClick('error')">
							<div class="el-icon-edit"></div>
							<div>纠错</div>
						</div>
						<div class="dv-border-box1-select" v-if="dvBoxFlag == 'error' " @click="dvBoxClick('')">
							<div class="el-icon-edit"></div>
							<div>纠错</div>
						</div>

						<div class="lsw-split-line"></div>

						<div class="dv-border-box1" v-if="dvBoxFlag != 'collection' " @click="dvBoxClick('collection')">
							<div class="el-icon-star-off"></div>
							<div>收藏</div>
						</div>
						<div class="dv-border-box1-select" v-if="dvBoxFlag == 'collection' " @click="dvBoxClick('')">
							<div class="el-icon-star-off"></div>
							<div>收藏</div>
						</div>

					</div>
					<div class="operationBox">
						<!-- 收藏 -->
						<div v-show="dvBoxFlag == 'collection'">
							<div
								style="position: absolute; right: 5px; height: 50px; width: 155px; border: 1px solid #005aca;background-color: #F5F7FA;border-radius: 4px;">
							</div>
							<div class="dv-border-box1" v-if="dvBoxTwoFlag != 'choice' "
								@click="dvBoxTwoClick('choice')">
								<div style="height: 5px;"></div>
								<div>选择</div>
							</div>
							<div class="dv-border-box1-select" v-if="dvBoxTwoFlag == 'choice' "
								@click="dvBoxTwoClick('')">
								<div style="height: 5px;"></div>
								<div>选择</div>
							</div>

							<div class="lsw-split-line"></div>
							<div class="dv-border-box1" v-if="dvBoxTwoFlag != 'save' " @click="dvBoxTwoClick('save')">
								<div style="height: 5px;"></div>
								<div>保存</div>
							</div>
							<div class="dv-border-box1-select" v-if="dvBoxTwoFlag == 'save' "
								@click="dvBoxTwoClick('')">
								<div style="height: 5px;"></div>
								<div>保存</div>
							</div>

							<div class="operationBox">
								<el-row v-if="dvBoxTwoFlag == 'choice' ">
									<el-col :span="8" :push="12">
										<el-select v-model="valueChoice" placeholder="请选择" @change="changeCollection">
											<el-option v-for="item in optionsChoice" :key="item.id"
												:label="item.collectName" :value="item.id">
											</el-option>
										</el-select>
									</el-col>
									<el-col :span="4" :push="12">
										<el-button type="primary" @click="delCollection">删除</el-button>
									</el-col>
								</el-row>

								<el-row v-if="dvBoxTwoFlag == 'save' ">
									<el-col :span="8" :push="12">
										<el-input v-model="collectionName" placeholder="请输入收藏名称"></el-input>
									</el-col>
									<el-col :span="4" :push="12">
										<el-button type="primary" @click="addCollection">确定</el-button>
									</el-col>
								</el-row>
							</div>
						</div>

						<!-- 纠错 -->
						<div v-show="dvBoxFlag == 'error'  ">
							<div
								style="position: absolute; right: 5px; height: 50px; width: 155px; border: 1px solid #005aca;background-color: #F5F7FA;border-radius: 4px;">
							</div>

							<div class="dv-border-box1" v-if="dvBoxTwoFlag != 'error1' "
								@click="dvBoxTwoClick('error1')">
								<div style="height: 5px;"></div>
								<div>记录</div>
							</div>
							<div class="dv-border-box1-select" v-if="dvBoxTwoFlag == 'error1' "
								@click="dvBoxTwoClick('')">
								<div style="height: 5px;"></div>
								<div>记录</div>
							</div>

							<div class="lsw-split-line"></div>

							<div class="dv-border-box1" v-if="dvBoxTwoFlag != 'error2' "
								@click="dvBoxTwoClick('error2')">
								<div style="height: 5px;"></div>
								<div>纠错</div>
							</div>
							<div class="dv-border-box1-select" v-if="dvBoxTwoFlag == 'error2' "
								@click="dvBoxTwoClick('')">
								<div style="height: 5px;"></div>
								<div>纠错</div>
							</div>


              <div class="lsw-index-error-box" v-if="dvBoxTwoFlag == 'error2'">
                <!--								<div class="dv-border-box" v-if="dvBoxThreeFlag != 'third2' "-->
                <!--									@click="dvBoxThreeClick('third2')">-->
                <!--									<span>面</span>-->
                <!--								</div>-->
                <!--								<div class="dv-border-box-select" v-if="dvBoxThreeFlag == 'third2' "-->
                <!--									@click="dvBoxThreeClick('')">-->
                <!--									<span>面</span>-->
                <!--								</div>-->

                <!--								<div class="dv-border-box" v-if="dvBoxThreeFlag != 'second2' "-->
                <!--									@click="dvBoxThreeClick('second2')"><span>线</span>-->
                <!--								</div>-->
                <!--								<div class="dv-border-box-select" v-if="dvBoxThreeFlag == 'second2' "-->
                <!--									@click="dvBoxThreeClick('')"><span>线</span>-->
                <!--								</div>-->

                <!--								<div class="dv-border-box" v-if="dvBoxThreeFlag != 'first2' "-->
                <!--									@click="dvBoxThreeClick('first2')"><span>点</span>-->
                <!--								</div>-->
                <!--								<div class="dv-border-box-select" v-if="dvBoxThreeFlag == 'first2' "-->
                <!--									@click="dvBoxThreeClick('')"><span>点</span>-->
                <!--								</div>-->

                <div class="dv-border-box" v-if="dvBoxThreeFlag != 'tianjia' "
                     @click="dvBoxThreeClick('tianjia')"><span>添加</span>
                </div>
                <div class="dv-border-box-select" v-if="dvBoxThreeFlag == 'tianjia' "
                     @click="dvBoxThreeClick('')"><span>添加</span>
                </div>

                <div class="dv-border-box" v-if="dvBoxThreeFlag != 'xuanze' "
                     @click="dvBoxThreeClick('xuanze')"><span>选择</span>
                </div>
                <div class="dv-border-box-select" v-if="dvBoxThreeFlag == 'xuanze' "
                     @click="dvBoxThreeClick('')"><span>选择</span>
                </div>

                <el-form style="margin-top: 80px;">
                  <el-form-item>
                    <el-row style="width: 100%">
                      <el-col :span="6">
                        <div style="color: black;text-align: center;"><strong>图层:</strong></div>
                      </el-col>
                      <el-col :span="18">
                        <el-select v-model="valueError" placeholder="请选择图层" @change="changeError">
                          <el-option v-for="item in optionsError" :key="item.value"
                                     :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item>
                    <el-row style="width: 100%">
                      <el-col :span="6">
                        <div style="color: black;text-align: center;"><strong>年份:</strong></div>
                      </el-col>
                      <el-col :span="18">
                        <el-select v-model="valueErrorYear" placeholder="请选择年份" @change="changeErrorYear">
                          <el-option v-for="item in optionsErrorYear" :key="item.value"
                                     :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item>
                    <el-row style="width: 100%">
                      <el-col :span="6">
                        <div style="color: black;text-align: center;"><strong>描述:</strong></div>
                      </el-col>
                      <el-col :span="18">
                        <el-input type="textarea" placeholder="请输入描述" v-model="errorTextarea"></el-input>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item>
                    <el-row style="width: 100%">
                      <el-col :span="6">
                        <div style="color: black;text-align: center;"><strong>电话:</strong></div>
                      </el-col>
                      <el-col :span="18">
                        <el-input v-model="errorPhone" placeholder="请输入电话"></el-input>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item>
                    <el-row style="width: 100%">
                      <el-col :span="6">
                        <div style="color: black;text-align: center;"><strong>邮箱:</strong></div>
                      </el-col>
                      <el-col :span="18">
                        <el-input v-model="errorMailbox" placeholder="请输入邮箱"></el-input>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-form>
                <el-button @click="errorSave()" type="primary">保存</el-button>
                <el-button @click="Clear()" type="primary">清除</el-button>
              </div>

							<div class="lsw-index-error-box" v-if="dvBoxTwoFlag == 'error1'"
								style="text-align: left; font-size: 16px;">
								<el-row style="margin-top: 10px; text-align: center; font-size: 20px;">
									<el-col :span="19">
										纠错信息
									</el-col>
									<el-col :span="4">
										状态
									</el-col>
								</el-row>
								<div style="width: 100%; height: 1px; margin: 2px; background-color: #005aca;"></div>
								<div class="lsw-scroll" style="height: 90%;">
									<div v-for="(item,index) in errorData">
										<el-row style="margin-top: 10px;">
											<el-col :span="19" :push="1">
												{{item.plottText}}
											</el-col>
											<el-col :span="4" v-if="item.state == '未处理'">
												{{item.state}}
											</el-col>

											<el-col :span="4" v-if="item.state == '已回复'">
												<span style="color: red">{{item.state}}</span>
											</el-col>

											<el-col :span="4" v-if="item.state == '已完成'">
												<span style="color: green">{{item.state}}</span>
											</el-col>
										</el-row>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
		</div>
	</my-template>
</template>

<script>


  import MapSwitch from '../mapSwitch.vue'
	import $axios from "@/network/index.js";
	import MyTemplate from "@/components/my-template";
	import ElectricalLists from "@/views/electronic-map/subject-map/SubjectLists";
	import EchartsBar from "./EchartsBar.vue";
	import EchartsLine from "./EchartsLine.vue";
	import EchartsPie from "./EchartsPie.vue";
	import {
		getFeatureByJson
	} from "@/api/electronic-map/electronic-map-service";
  import {catalogueByParentIdService, selectCatalogueById} from "../../../api/electronic-map/electronic-map-service";
  import $axios1 from "@/network/shiyong";


  //var intImg = 0;
  //var waterMat;
	var evLayerManager;
	var map;
	var draw;
	var source;
	var vector;
	var feature;
	var viewer;
	var url;
	var imageList = [];
	var imageListNew = [];
	var dataList = [];
	var echarts = require('echarts');
	var echartsArr = {};
	var attribute;
	var attributeData;

	var promise = {};
	

	var longitude;
	var latitude;
	var heightA;
	var viewHeight;
	var viewDirection;
	var anglePitch;
  var drawHandleTool;

  export default {
		components: {
      MapSwitch,
			MyTemplate,
			ElectricalLists,
			EchartsBar,
			EchartsLine,
			EchartsPie,
		},
		data() {
			return {
        // 地图图层列表
        basemapLayers:[
          {// 矢量
            id:'vec',
            layers:[
              {
                name:'vecProvider',
                type:1,
                param:{
                  url: 'http://172.16.210.4/mapcache/TDT_Cache_vec_w/{z}/{x}/{y}.png',
                  maximumLevel: 18
                },
                provider:null
              },
              {
                name:'cvaProvider',
                type:1,
                param:{
                  url: 'http://172.16.210.4/mapcache/TDT_Cache_cva_w/{z}/{x}/{y}.png',
                  maximumLevel: 18
                },
                provider:null
              // },
              // {
              //   name:'vecQuanyu',
              //   type:1,
              //   param:{
              //     url: 'http://192.168.8.200/luanzhou/map_cache/cache_vec_quanyu/{z}/{x}/{y}.png',
              //     maximumLevel: 19
              //   },
              //   provider:null
              // },
              // {
              //   name:'vecChengqu',
              //   type:1,
              //   param:{
              //     url: 'http://192.168.8.200/luanzhou/map_cache/cache_vec_chengqu/{z}/{x}/{y}.png',
              //     maximumLevel: 19
              //   },
              //   provider:null
              }
            ]
          },
          {// 影像
            id:'img',
            layers:[
              {
                name:'imgProvider',
                type:1,
                param:{
                  url: 'http://172.16.210.4/mapcache/TDT_Cache_img_w/{z}/{x}/{y}.jpg',
                  maximumLevel: 16
                },
                provider:null
              },{
                name:'ciaProvider',
                type:1,
                param:{
                  url: 'http://172.16.210.4/mapcache/TDT_Cache_cia_w/{z}/{x}/{y}.png',
                  maximumLevel: 18
                },
                provider:null
              },{
                name:'domChengqu',
                type:1,
                param:{
                  url: 'http://172.16.210.4/mapcache/dom_cache/{z}/{x}/{y}.png',
                  // minimumLevel: 16,
                  maximumLevel: 17
                },
                provider:null
              }
            ]
          },
          {// 地形
            id: 'ter',
            layers: []
          }
        ],
        mapIndex:1, // 当前图层序号
        layers_base:[],
        layers_3d:[],

        isPolymerization: "",

        dataSourceNew: {},

        evE3MLod: null,
        evE3MLod2: null,

        evLayers: [],

        oldLayer: null,

        active: 0,

        evLayer: [],

			  dataTypeNew: "",

        yList: [],

        min: 0,//最小值
        max: 0,//最大值

        inputValue: "", //搜索内容
        tableDataShowList: [], //输入框搜索出来的值

        waterMatList:[],

        pickId: 0,

        intImg: 0,
        intImg1: 0,

        tabList: [
          {
            title: '清除', icon: require('@/assets/map/map-switch-write1.png'),layers:[]
          },
          {
            title: '地图', icon: require('@/assets/map/map-switch-vec.png'),layers:['vec']
          },
          {
            title: '影像', icon: require('@/assets/map/map-switch-img.png'),layers:['img_cache_world','img_cva_cache_fengfeng']
          },
          {
            title: '三维', icon: require('@/assets/map/map-switch-3d.png'),layers:['DEM_NoCity','img_cache_world','img_cva_cache_fengfeng']
          }
        ],

        tucengType: "", //图层类型 点、线、面

        tableTitle: [], //表头
        tableDataList: [], //表格数据
        natureArray: [],

        natureList: [], //属性列表 （属性菜单）

        borderactive: "1",

				type: "bar",
				tuceng: "",
				year: 0,
				chart: "bar",
				map: "bar",
				mapShow: false,
				value: [1, 50],
				marks: {
					0: "2022-01-01",
					30: "2022-01-02",
					50: "2022-01-03",
					70: "2022-01-04",
				},
				form: {
					search: "",
				},
				pointList: [],
				pointListSelect: [],
				attributeList: [],
				yearDataList: [],
				attributeDataList: [],
				
				
				
				dvBoxFlag: '',
				dvBoxTwoFlag: '',
				collectionName: '', //收藏名
				optionsChoice: [], //选择数组
				valueChoice: '', //选中的收藏

				//纠错
        plott: '',
				errorTextarea: '',
				errorPhone: '',
				errorMailbox: '',
				dvBoxThreeFlag: '',
				errorData: [],
				correctorId: 1,
				corrector: "",
				unit: "单位",
				address: "地址",
				serviceId: 1,
				serviceName: "专题地图",
				serviceType: "专题地图",
				serviceDepartment: "专题地图",
				serviceTopics: "专题地图",
				serviceStatus: "在线",
				personId: 1,
				person: "管理员",
				errorDate: new Date(),
				state: "未处理",

        serviceId: 0,

        optionsError: [],
        valueError: '',
        valueChoiceId: '', //选中收藏的ID
        optionsErrorYear:[],
        valueErrorYear: '',
				
				plottingNewFlag: false,
				plottingInput: '',
				
				locationInfos: [],//搜索数组
				tableFlag: '0',//搜索
				getCheck: '',
        lat: '',
        lng: '',
        tucengname: [],
			};
		},
		mounted() {
			//加载三维
			this.webGlobe();
		},

		methods: {

		  //清除
      clearTuceng(){

      },

		  //步骤条左
      left() {
        this.active--;
        if (this.active == -1){
          this.active = this.yList.length - 1;
        }
        for (let i = 0; i < this.yList.length; i++) {
          if (this.active == i){
            this.changeEchartsYear(this.yList[i]);
          }
        }
      },

      //步骤条右
      right() {
        this.active++;
        if (this.active == this.yList.length){
          this.active = 0;
        }
        for (let i = 0; i < this.yList.length; i++) {
          if (this.active == i){
            this.changeEchartsYear(this.yList[i]);
          }
        }
        
      },

		  //步骤条点击获取年份
      getYear(year, index){
        this.active = index;
        this.changeEchartsYear(year);
      },

		  //获取图层所有属性
      tucengDataAll(dataAll){

        this.clearPointListSelect(); //清除点击的弹窗

        this.resetNew(); //重置

        this.yList = [];

        this.pointList = [];
        this.pointListSelect = [];

        this.natureArray = [];
        this.natureList = [];

        //获取动态事件滑块数据
        let time = dataAll.dataGenerationTime;
        let timeList = time.split(",");
        this.yList = timeList;
        this.active = this.yList.length - 1;

        //调用setTuceng 传递图层名称 图层类型
        this.setTuceng(dataAll.dataName, dataAll.dataType, dataAll.isPolymerization);

        if(this.yList.length > 1){
          for (let i = 0; i < this.yList.length; i++) {
            if (this.active == i){
              this.changeEchartsYear(this.yList[i]);
            }
          }
        }

      },

		  //表格数据添加点击事件
      clickData(row, event, column) {
        for (let attributeListElement of this.attributeList) {
          //for (let tableTitleElement of this.tableTitle) {
            let title = row[this.tableTitle[0].shopName];
            if (title == attributeListElement[this.tableTitle[0].shopName]){
              //获取坐标 定位
              if (attributeListElement.geom != undefined){
                let sp = attributeListElement.geom.split("(")[1].split(" ")
                let lon = sp[0];
                let lat = sp[1].substring(0, attributeListElement.geom.split(
                    "(")[1].split(" ")[1].length - 1);

                //定位
                window.viewer.scene.camera.flyTo({
                  destination: new Cesium.Cartesian3.fromDegrees(lon, lat, 1500),
                  duration: 0,
                  orientation: {
                    heading: 0,
                    pitch: -1,
                    roll: 0,
                  },
                  complete: function callback() {}
                });

              }else {
                let sp = attributeListElement.the_geom.split("(")[1].split(" ")
                let lon = sp[0];
                let lat = sp[1].substring(0, attributeListElement.the_geom.split(
                    "(")[1].split(" ")[1].length - 1);

                //定位
                window.viewer.scene.camera.flyTo({
                  destination: new Cesium.Cartesian3.fromDegrees(lon, lat, 1500),
                  duration: 0,
                  orientation: {
                    heading: 0,
                    pitch: -1,
                    roll: 0,
                  },
                  complete: function callback() {}
                });
              }
            }
          //}

        }

      },

		  //year滑块变化
      changeEchartsYear(year) {
        if (this.dataTypeNew === "1-2"){//切换 etm
          //先删除 再添加
          for (let evLayerElement of this.evLayer) {
            evLayerManager.remove(evLayerElement);
          }

          let evLay = evLayerManager.add({
            name: this.tuceng + year,
            url: 'http://10.255.126.154:8088',
            type: Cesium.EV_LayerType.IMAGE,
          });

          this.evLayer.push(evLay);

          let data = {img: this.tuceng,type: this.dataTypeNew};
          imageListNew.push(data);


        }else if (this.dataTypeNew === "3-2"){ //shp 获取每年数据
          selectCatalogueById(this.tucengname[this.tucengname.length-1]).then(res => {
            if (res.code == 200){
              let polymerization = res.data.isPolymerization
              getFeatureByJson(this.tuceng, year, polymerization).then(res => {
                if(res.status == 200){
                  var attribute = res.data.result[0];
                  this.attributeList = attribute.featureCollection;
                  this.echartsData(this.type);
                }
              });
            }
          })
        }
      },

		  //添加聚合数组
      afterAddDataSource(dataSource){
        this.dataSourceNew = dataSource;
        let height = Math.ceil(window.viewer.camera.positionCartographic.height)
        if(height < 3000){
          dataSource.clustering.enabled = false;//是否聚合
        }else{
          dataSource.clustering.enabled = true;//是否聚合
        }
        dataSource.clustering.pixelRange = 70;//聚合范围（单位px）
        dataSource.clustering.minimumClusterSize = 2;//最小屏幕聚合对象数值（小于等于该数值，不聚合）
        //将进行实体的广告牌聚类
        dataSource.clustering.clusterBillboards = true;

        //随机获取图片
        this.intImg = this.intImg + 1;

        let requireImg = '';
        if (this.intImg % 5 == 0) {
          requireImg = require('../../../../static/img/round2.png');
        }else if (this.intImg % 5 == 1){
          requireImg = require('../../../../static/img/round3.png');
        }else if (this.intImg % 5 == 2){
          requireImg = require('../../../../static/img/round4.png');
        }else if (this.intImg % 5 == 3){
          requireImg = require('../../../../static/img/round5.png');
        }else if (this.intImg % 5 == 4){
          requireImg = require('../../../../static/img/round6.png');
        }

        let removeListener = dataSource.clustering.clusterEvent.addEventListener(
             (clusteredEntities, cluster) => {
              cluster.label.show = true;
              //cluster.label._fillColor = Cesium.Color.BLUE;
              cluster.label._fillColor._fontSize = '3px';
              cluster.label._fillColor._textAlign = 'center';
              //cluster.label._fillColor._fontFamily = 'simhei';
               //_font: "30px sans-serif"
              cluster.label._pixelOffset = new Cesium.Cartesian2(-15, 15);
              cluster.label._fontWeight = '800';

              cluster.billboard.show = true;
              cluster.billboard.id = cluster.label.id;


              // eslint-disable-next-line
              //cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
              // cluster.billboard.width =50
              // cluster.billboard.height= 50
              //let icon = require('../../../assets/map/cluster/3.png')
              let icon = requireImg;
              /*if (clusteredEntities.length > 300) {
                icon = require('../../../../static/img/round1.png')
              } else if (clusteredEntities.length > 90) {
                icon = require('../../../../static/img/round1.png')
              } else if (clusteredEntities.length > 30) {
                icon = require('../../../../static/img/round1.png')
              } else if (clusteredEntities.length > 10) {
                icon = require('../../../../static/img/round1.png')
              } else if (clusteredEntities.length > 2) {
                icon = require('../../../../static/img/round1.png')
                //icon = require('../../../assets/map/cluster/' + clusteredEntities.length + '.png')
              }*/
              cluster.billboard.image = icon;
            }
        );
        window.dataSource = dataSource;
      },

		  //获取重置按钮点击事件
      resetNew(){
        this.clearAll(this.oldLayer);
        this.mapTab(0,{layers:['vec']});
        this.dvBoxFlag = '';
        this.dataTypeNew = "";
        for (let i = 0; i < imageListNew.length; i++){
          //判断类型
          if(imageListNew.type === "1-1") {// 地图
            //图层变化以后 清除wms
            if( window.dataSource) {
              if (window.dataSource.clustering) {
                window.dataSource.clustering.enabled = false;
              }
              window.dataSource.entities.removeAll()
            }

            if (window.viewer.imageryLayers._layers.length > 0){
              window.viewer.imageryLayers._layers[0].show = false;
            }

            //window.viewer.imageryLayers.removeAll();
            /*for (let j = 0; j < imageList.length; j++) {
              window.viewer.imageryLayers.remove(imageList[j]);
            }*/

          }else if (imageListNew.type === "3-2"){ // shp
            if( window.dataSource) {
              if (window.dataSource.clustering) {
                window.dataSource.clustering.enabled = false;
              }
              window.dataSource.entities.removeAll()
            }
            //图层变化以后 清除wms
            for (let j = 0; j < imageList.length; j++) {
              window.viewer.imageryLayers.remove(imageList[j]);
            }
            // 清除billboard
            window.viewer.entities.removeAll();
            // 关闭弹窗
            if (this.pointList.length > 0) {
              let data = this.pointList
              for (let i = 0; i < data.length; i++) {
                let item = data[i]
                let htmlOverlay = document.getElementById(item.id)
                if (htmlOverlay) {
                  window.viewer.container.removeChild(htmlOverlay);
                }
              }
            }
          }else if (imageListNew.type === "1-2"){ //ETM
            //evLayerManager.removeAll();
            if (evLayerManager._images._array.length > 0){
              evLayerManager._images._array[0].show = false;
            }else {
              for (let evLayerElement of this.evLayer) {
                evLayerManager.remove(evLayerElement);
              }
            }
          }

          //this.dataTypeNew = "";
          this.pointList = [];
          this.pointListSelect = [];
        }
        this.natureArray = [];
        this.natureList = [];

        //表格数据清空
        this.tableDataList = [];
        this.tableDataShowList = [];
        this.tableTitle = [];
      },
      //获取图层类型
      setTucengType(type){
        this.tucengType = type;
      },
      setNature(nature){
        this.natureList = [];
        this.natureList = nature;
      },
      //获取图层
      setTuceng(tuceng,dataType,isPolymerization) {
        this.tuceng = tuceng;
        this.dataTypeNew = dataType;
        if (dataType === "1-1"){ //地图
          let providerWMS = new Cesium.WebMapServiceImageryProvider({
            url: this.$mapUrl + '/earthview/rest/services/mapserver/wms',
            layers: tuceng,
            parameters: {
              serviceName: tuceng,
              transparent: true,
              FORMAT: 'image/png',
              VERSION: '1.0',
              styles: '',
              SRS: 'EPSG:4326',
              // MAP_KEY:'be9a5db1671a659738216ed9f1d255fa',
              TILED: true
            }
          });
          var image = new Cesium.ImageryLayer(providerWMS);
          window.viewer.imageryLayers.add(image);
          imageList.push(image);
          let data = {img: image,type: dataType};
          imageListNew.push(data);
        }else if (dataType === "3-2"){ //shp

          //获取点线面类型 点不显示 面、线显示‘
          getFeatureByJson(tuceng, this.year, isPolymerization).then(res => {
            if(res.status == 200){
              let attribute = res.data.result[0];
              let layerTypeNew = attribute.layerType;
              //判断点不显示 线、面不显示
              if (layerTypeNew == "Point"){ //点

              }else if (layerTypeNew == "MultiPolygon"){ //面
                let providerWMS = new Cesium.WebMapServiceImageryProvider({
                  url: this.$mapUrl + '/earthview/rest/services/vectorserver/wms',
                  layers:  tuceng,
                  parameters: {
                    serviceName:  tuceng,
                    transparent: true,
                    FORMAT: 'image/png',
                    VERSION: '1.0',
                    styles: '',
                    SRS: 'EPSG:4326',
                    // MAP_KEY:'be9a5db1671a659738216ed9f1d255fa',
                    TILED: true
                  }
                });
                let image = new Cesium.ImageryLayer(providerWMS);
                imageList.push(image);
                window.viewer.imageryLayers.add(image);
                let data = {img: image,type: dataType};
                imageListNew.push(data);
              }else if (layerTypeNew == "MultiLineString"){ //线
                let providerWMS = new Cesium.WebMapServiceImageryProvider({
                  url: this.$mapUrl + '/earthview/rest/services/vectorserver/wms',
                  layers:  tuceng,
                  parameters: {
                    serviceName:  tuceng,
                    transparent: true,
                    FORMAT: 'image/png',
                    VERSION: '1.0',
                    styles: '',
                    SRS: 'EPSG:4326',
                    // MAP_KEY:'be9a5db1671a659738216ed9f1d255fa',
                    TILED: true
                  }
                });
                let image = new Cesium.ImageryLayer(providerWMS);
                imageList.push(image);
                window.viewer.imageryLayers.add(image);
                let data = {img: image,type: dataType};
                imageListNew.push(data);
              }
            }
          })

        }else if (dataType === "1-2"){ //etm
          let nameNew = "";
          if (this.yList.length > 1){
            nameNew = tuceng + this.year;
          }else {
            nameNew = tuceng;
          }
          evLayerManager = new Cesium.EV_LayerManager(window.viewer.scene);
          let evLay = evLayerManager.add({
            name: nameNew,
            url: 'http://10.255.126.154:8088',
            type: Cesium.EV_LayerType.IMAGE,
          });
          this.evLayer.push(evLay);
          let data = {img: nameNew,type: dataType};
          imageListNew.push(data);
        }
      },
      clearAll(oldLayers) {

        if(oldLayers){
          this.dataTypeNew = oldLayers.dataType
        }

        //判断类型
        if(this.dataTypeNew === "1-1") {// 地图
          //图层变化以后 清除wms
          if( window.dataSource) {
            if (window.dataSource.clustering) {
              window.dataSource.clustering.enabled = false;
            }
            window.dataSource.entities.removeAll()
          }

          if (window.viewer.imageryLayers._layers.length > 0){
            window.viewer.imageryLayers._layers[0].show = false;
          }

          //window.viewer.imageryLayers.removeAll();
          // for (let j = 0; j < imageList.length; j++) {
          //   window.viewer.imageryLayers.remove(imageList[j]);
          // }

        }else if (this.dataTypeNew === "3-2"){ // shp

          this.clearPointListSelect(); //清除点击的弹窗

          if( window.dataSource) {
            if (window.dataSource.clustering) {
              window.dataSource.clustering.enabled = false;
            }
            window.dataSource.entities.removeAll()
          }
          //图层变化以后 清除wms
          for (let j = 0; j < imageList.length; j++) {
            window.viewer.imageryLayers.remove(imageList[j]);
          }
          // 清除billboard
          window.viewer.entities.removeAll();
          // 关闭弹窗
          if (this.pointList.length > 0) {
            let data = this.pointList
            for (let i = 0; i < data.length; i++) {
              let item = data[i]
              let htmlOverlay = document.getElementById(item.id)
              if (htmlOverlay) {
                window.viewer.container.removeChild(htmlOverlay);
              }
            }
          }
        }else if (this.dataTypeNew === "1-2"){ //ETM
          if (evLayerManager._images._array.length > 0){
            evLayerManager._images._array[0].show = false;
          }else {
            for (let evLayerElement of this.evLayer) {
             evLayerManager.remove(evLayerElement);
           }
          }

        }

        this.pointList = [];
        this.pointListSelect = [];

      },

		  //三维获取属性数据
      popupData(){

        this.tableDataList = [];
        for (let i = 0; i < this.pointList.length; i++) {

          let item = this.pointList[i]
          let htmlOverlay = document.getElementById(item.id);
          htmlOverlay.style.width = '230px';
          htmlOverlay.style.height = '130px';
          htmlOverlay.style.paddingTop = '10px';
          htmlOverlay.style.paddingBottom = '10px';
          htmlOverlay.style.paddingLeft = '10px';
          htmlOverlay.style.paddingRight = '10px';
          //htmlOverlay.style.backgroundColor = "#FFFFFF";
          htmlOverlay.style.backgroundSize = "250px 150px";
          htmlOverlay.style.backgroundRepeat = "no-repeat";
          htmlOverlay.style.overflowY = "scroll";
          //htmlOverlay.style.padding = "10px 5px";
          htmlOverlay.style.backgroundImage = "url("+require('../../../../static/img/bgPopup.png')+")"; //弹窗添加背景图


          //添加获取到的数据到弹窗
          htmlOverlay.innerHTML = '<div id="' + item.id +
              ' style="text-align: center;color: #FFFFFF;">';
          var title = "";
          if (this.attributeList[i].村庄 != undefined){
            title = this.attributeList[i].村庄;
          }else if (this.attributeList[i].乡镇 != undefined){
            title = this.attributeList[i].乡镇;
          }
          htmlOverlay.innerHTML += '<div style="font-weight: bolder;font-size: 14px;text-align: center;color: #FFFFFF;">'+ title +'</div>'

          for (let attributeDataElement of this.attributeDataList) {
            htmlOverlay.innerHTML += '<div style="text-align: center;"><span style="font-weight: bolder;color: #FFFFFF;">'+ attributeDataElement +'</span>' + ":" + '<span style="font-weight: bolder;color: #fff300;font-size: 14px;"> '+ this.attributeList[i][attributeDataElement] + '</span></div>'
          }
          htmlOverlay.innerHTML += '</div>';

          //动态添加表格列
          this.tableTitle = [];
          if (this.attributeList[i].村庄 != undefined){
            this.tableTitle.push({shopName: "村庄"});
          }else if (this.attributeList[i].乡镇 != undefined){
            this.tableTitle.push({shopName: "乡镇"});
          }

          for (let attributeDataElement of this.attributeDataList) {

            //添加数据到表格显示
            var title = {shopName: attributeDataElement};
            this.tableTitle.push(title);
          }

          //添加表格内容数据
          this.titleData1 = {};
          let titleData1 ={};
          for (let tableTitleElement of this.tableTitle) {
            var table = tableTitleElement.shopName;
            titleData1[table] = this.attributeList[i][table];
          }
          this.tableDataList.push(titleData1);

        }

      },

      //地图切换
      mapTab(index, item) {
        let that = this
        that.mapIndex = index
        // that.borderactive = index;
        // 隐藏所有图层
        let layers = window.viewer.imageryLayers._layers
        for (let i = 0;i<layers.length;i++) {
          const layer = window.viewer.imageryLayers.get(i)
          layer.show = false
        }
        if (index < 2) {
          // 关闭动态水域
          // 关闭倾斜摄影
          that.layers_3d.forEach((layer) => {
            layer.show = false
          })
          // 切换为二维
          window.viewer.scene.mode = Cesium.SceneMode.SCENE2D;
          // 切换角度
          window.viewer.scene.camera.flyTo({
            destination: new Cesium.Cartesian3.fromDegrees(118.6976, 39.7415, 5000),
            duration: 1
          })
          if(index==0){ // 矢量
            const basemapLayer = that.basemapLayers[0]
            basemapLayer.layers.forEach((layer) => {
              if(!layer.provider){
                // 第一次添加
                const layerProvider = that.getLayer(layer)
                layer.provider = window.viewer.imageryLayers.addImageryProvider(layerProvider)
              }else {
                layer.provider.show = true
              }
            })
          }else if(index==1){ // 影像
            const basemapLayer = that.basemapLayers[1]
            basemapLayer.layers.forEach((layer) => {
              if(!layer.provider){
                // 第一次添加
                const layerProvider = that.getLayer(layer)
                layer.provider = window.viewer.imageryLayers.addImageryProvider(layerProvider)
              }else {
                layer.provider.show = true
              }
            })
          }else{ // 地形

          }
        } else {
          // 切换为三维显示
          window.viewer.scene.mode = Cesium.SceneMode.SCENE3D;
          // 切换到影像图
          const basemapLayer = that.basemapLayers[1]
          basemapLayer.layers.forEach((layer) => {
            layer.provider.show = true
          })
          // 显示倾斜摄影
          that.layers_3d.forEach((layer) => {
            layer.show = true
          })
          // 加载动态水域
          // 切换角度
          window.viewer.scene.camera.flyTo({
            destination: new Cesium.Cartesian3.fromDegrees(118.6976, 39.7215, 1000),
            duration: 1,
            orientation: {
              heading: 0,
              pitch: -0.5,
              roll: 0
            }
          })
        }
      },

      echartsData(value) {
        this.type = value;
        if (value == "bar") {
          this.tableDataList = [];
          this.tableDataShowList = [];
          attribute = [];
          attributeData = [];
          for (let i = 0; i < this.pointListSelect.length; i++) {

            let htmlOverlay = document.getElementById(this.pointListSelect[i].id);
            htmlOverlay.style.width = '200px';
            htmlOverlay.style.height = '120px';

            attribute = [];
            attributeData = [];
            //动态添加表格列
            this.tableTitle = [];
            if (this.attributeList[i].村庄 != undefined){
              this.tableTitle.push({shopName: "村庄"});
            }else if (this.attributeList[i].乡镇 != undefined){
              this.tableTitle.push({shopName: "乡镇"});
            }
            //动态添加表格数据
            var colorList = ['#fd0000','#0069ff','#ffca00','#18ff00','#844690','#f9fd03','#de6969','#f200ff'];
            for (let attributeDataElement of this.attributeDataList) {

              //添加数据到表格显示
              var title = {shopName: attributeDataElement};
              this.tableTitle.push(title);

              attribute = [];
              if (this.attributeList[i].村庄 != undefined){
                attribute.push(this.attributeList[i].村庄);
              }else if (this.attributeList[i].乡镇 != undefined){
                attribute.push(this.attributeList[i].乡镇);
              }

              //传递列表数据 对比列表 显示颜色
              var color = "";
              for (let i = 0; i < this.natureList.length; i++){
                if (this.natureList[i].label == attributeDataElement){
                  if (i % 8 == 0){
                    color = '#fd0000';
                  }else if (i % 8 == 1){
                    color = '#0069ff';
                  }else if (i % 8 == 2){
                    color = '#ffca00';
                  }else if (i % 8 == 3){
                    color = '#18ff00';
                  }else if (i % 8 == 4){
                    color = '#844690';
                  }else if (i % 8 == 5){
                    color = '#f9fd03';
                  }else if (i % 8 == 6){
                    color = '#de6969';
                  }else if (i % 8 == 7){
                    color = '#f200ff';
                  }
                };
              }


              var data = {
                name: attributeDataElement,
                data: [this.attributeList[i][attributeDataElement]],
                type: value,
                itemStyle: {
                  normal: {
                    color: color
                  }
                },
              };
              attributeData.push(data);
            }

            //添加表格内容数据
            this.titleData1 = {};
            let titleData1 ={};
            for (let tableTitleElement of this.tableTitle) {
              var table = tableTitleElement.shopName;
              titleData1[table] = this.attributeList[i][table];
            }
            this.tableDataList.push(titleData1);
            this.tableDataShowList = this.tableDataList;

            // this.tableDataList.push(this.titleData1);



            //调用Echarts
            echartsArr[this.pointListSelect[i].id] = echarts.init(document.getElementById(this.pointListSelect[i].id));
            echartsArr[this.pointListSelect[i].id].clear();
            echartsArr[this.pointListSelect[i].id].setOption({
              //backgroundColor: 'rgba(1,10,20,0.13)',
              tooltip: {},
              grid: {
                top: '20%',
                left: '15%',
                right: '14%',
                bottom: '20%',
              },
              xAxis: {
                type: 'category',
                data: attribute,
                splitLine: {
                  show: false
                },
                axisLine: {
                  /*lineStyle:{
                    color: '#FFFFFF',
                  }*/
                },
                axisLabel: {
                  /*textStyle: {
                    color: '#FFFFFF'
                  }*/
                },
              },
              yAxis: {
                type: 'log',
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: true,
                },
                axisLabel: {
                  show: false,
                  /*textStyle: {
                    color: '#FFFFFF'
                  }*/
                },
              },
              series: attributeData
            }, true);
          }
        } else if (value == "line") { //折线图 显示所有时间数据

          //获取三年的数据
          //var yList = [2013, 2014, 2015, 2016, 2017, 2018, 2019];
          //var yList = this.yList;
          this.yearDataList = [];

          selectCatalogueById(this.tucengname[this.tucengname.length-1]).then(res => {
            if (res.code == 200) {
              let polymerization = res.data.isPolymerization;

              let promiseList = [];
              for (let i = 0; i < this.yList.length; i++) {
                promise["promise" + i] = new Promise((resolve,reject) => {
                  getFeatureByJson(this.tuceng, this.yList[i] ,polymerization).then(res => {
                    if(res.status == 200){
                      resolve(res.data)
                    }else {
                      reject(res)
                    }
                  })
                })

                promiseList.push(promise["promise" + i]);
              }

              Promise.all(promiseList).then((res) => {
                for (let i = 0; i < this.yList.length; i++) {
                  var attribute = res[i].result[0];
                  this.attributeList = attribute.featureCollection;
                  this.yearDataList.push(this.attributeList);
                }

                for (let i = 0; i < this.pointListSelect.length; i++) {

                  let htmlOverlay = document.getElementById(this.pointListSelect[i].id);
                  htmlOverlay.style.width = '200px';
                  htmlOverlay.style.height = '120px';
                  htmlOverlay.style.borderRadius = '10px';

                  var dataSeries = [];
                  var name = "";

                  if (this.yearDataList[0][i].村庄 != undefined){
                    name = this.yearDataList[0][i].村庄;
                  }else if (this.yearDataList[0][i].乡镇 != undefined){
                    name = this.yearDataList[0][i].乡镇;
                  }

                  for (let attributeDataElement of this.attributeDataList) {

                    //传递列表数据 对比列表 显示颜色
                    var color = "";
                    for (let i = 0; i < this.natureList.length; i++){
                      if (this.natureList[i].label == attributeDataElement){
                        if (i % 8 == 0){
                          color = '#fd0000';
                        }else if (i % 8 == 1){
                          color = '#0069ff';
                        }else if (i % 8 == 2){
                          color = '#ffca00';
                        }else if (i % 8 == 3){
                          color = '#18ff00';
                        }else if (i % 8 == 4){
                          color = '#844690';
                        }else if (i % 8 == 5){
                          color = '#f9fd03';
                        }else if (i % 8 == 6){
                          color = '#de6969';
                        }else if (i % 8 == 7){
                          color = '#f200ff';
                        }
                      };
                    }

                    var dataName = [];
                    for (let yearDataListElement of this.yearDataList) {
                      dataName.push(yearDataListElement[i][attributeDataElement]);
                    }
                    var data = {
                      name: attributeDataElement,
                      data: dataName,
                      type: value,
                      itemStyle: {
                        color: color
                      }
                    };
                    dataSeries.push(data);

                  }

                  //调用Echarts
                  echartsArr[this.pointListSelect[i].id] = echarts.init(document.getElementById(this.pointListSelect[
                      i].id));
                  echartsArr[this.pointListSelect[i].id].clear();
                  echartsArr[this.pointListSelect[i].id].setOption({
                    //backgroundColor: 'rgba(1,10,20,0.13)',
                    title: {
                      text: name,
                      x: "center",
                      textStyle: {
                        fontSize: 15
                      }
                    },
                    tooltip: {
                      trigger: 'axis'
                    },
                    grid: {
                      top: '20%',
                      left: '15%',
                      right: '14%',
                      bottom: '20%',
                    },
                    xAxis: {
                      type: 'category',
                      data: this.yList,
                      splitLine: {
                        show: false
                      },
                      axisLine: {
                        /*lineStyle:{
                          color: '#FFFFFF',
                        }*/
                      },
                      axisLabel: {
                        /*textStyle: {
                          color: '#FFFFFF'
                        }*/
                      },
                    },
                    yAxis: {
                      type: 'log',
                      splitLine: {
                        show: false
                      },
                      axisLine: {
                        show: true,
                      },
                      axisLabel: {
                        show: false,
                        /*textStyle: {
                          color: '#FFFFFF'
                        }*/
                      },
                    },
                    series: dataSeries
                  }, true);
                }
              })
            }
          })

        } else if (value == "pie") {
          this.tableDataList = [];
          this.tableDataShowList = [];
          attribute = [];
          attributeData = [];
          for (let i = 0; i < this.pointListSelect.length; i++) {

            let htmlOverlay = document.getElementById(this.pointListSelect[i].id);
            htmlOverlay.style.width = '200px';
            htmlOverlay.style.height = '120px';

            //动态添加表格列
            this.tableTitle = [];
            if (this.attributeList[i].村庄 != undefined){
              this.tableTitle.push({shopName: "村庄"});
            }else if (this.attributeList[i].乡镇 != undefined){
              this.tableTitle.push({shopName: "乡镇"});
            }

            attribute = "";
            attributeData = [];
            for (let attributeDataElement of this.attributeDataList) {

              //添加数据到表格显示
              var title = {shopName: attributeDataElement};
              this.tableTitle.push(title);

              if (this.attributeList[i].村庄 != undefined){
                attribute = this.attributeList[i].村庄;
              }else if (this.attributeList[i].乡镇 != undefined){
                attribute = this.attributeList[i].乡镇;
              }

              //传递列表数据 对比列表 显示颜色
              var color = "";
              for (let i = 0; i < this.natureList.length; i++){
                if (this.natureList[i].label == attributeDataElement){
                  if (i % 8 == 0){
                    color = '#fd0000';
                  }else if (i % 8 == 1){
                    color = '#0069ff';
                  }else if (i % 8 == 2){
                    color = '#ffca00';
                  }else if (i % 8 == 3){
                    color = '#18ff00';
                  }else if (i % 8 == 4){
                    color = '#844690';
                  }else if (i % 8 == 5){
                    color = '#f9fd03';
                  }else if (i % 8 == 6){
                    color = '#de6969';
                  }else if (i % 8 == 7){
                    color = '#f200ff';
                  }
                };
              }

              var data = {
                value: this.attributeList[i][attributeDataElement],
                name: attributeDataElement,
                itemStyle: {
                  color: color
                }
              }
              attributeData.push(data);
            }

            var data = {
              name: attribute,
              type: value,
              radius: '60%',
              data: attributeData,
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  }
                }
              }
            }

            //添加表格内容数据
            this.titleData1 = {};
            let titleData1 ={};
            for (let tableTitleElement of this.tableTitle) {
              var table = tableTitleElement.shopName;
              titleData1[table] = this.attributeList[i][table];
            }
            this.tableDataList.push(titleData1);
            this.tableDataShowList = this.tableDataList;

            //调用Echarts
            echartsArr[this.pointListSelect[i].id] = echarts.init(document.getElementById(this.pointListSelect[i].id));
            echartsArr[this.pointListSelect[i].id].clear();
            echartsArr[this.pointListSelect[i].id].setOption({
              backgroundColor: 'rgba(1,10,20,0.13)',
              tooltip: {},
              grid: {
                top: '5%',
                left: '5%',
                right: '5%',
                bottom: '5%',
              },
              series: data
            }, true);
          }
        }else if (value == "label"){ //label

          this.tableDataList = [];
          this.tableDataShowList = [];
          for (let i = 0; i < this.pointListSelect.length; i++) {

            let htmlOverlay = document.getElementById(this.pointListSelect[i].id);
            htmlOverlay.style.width = '180px';
            htmlOverlay.style.height = '100px';
            htmlOverlay.style.paddingTop = "10px";
            htmlOverlay.style.paddingRight = "10px";
            htmlOverlay.style.paddingLeft = "10px";
            htmlOverlay.style.paddingBottom = "10px";
            htmlOverlay.style.overflowY = "scroll";

            htmlOverlay.innerHTML = '<div id="' + this.pointListSelect[i].id + '>';
            var title = "";
            if (this.attributeList[i].村庄 != undefined){
              title = this.attributeList[i].村庄;
            }else if (this.attributeList[i].乡镇 != undefined){
              title = this.attributeList[i].乡镇;
            }
            htmlOverlay.innerHTML += '<div style="font-weight: bolder;font-size: 14px;text-align: left;color:blue;">'+ title +'</div>'

            for (let attributeDataElement of this.attributeDataList) {
              htmlOverlay.innerHTML += '<div style="text-align: left;"><span style="font-weight: bolder;color: blue;">'+ attributeDataElement +'</span>'
                  + ":" + '<span style="font-weight: bolder;color: blue;font-size: 14px;"> '+ this.attributeList[i][attributeDataElement] + '</span></div>'
            }
            htmlOverlay.innerHTML += '</div>';

            //动态添加表格列
            this.tableTitle = [];
            if (this.attributeList[i].村庄 != undefined){
              this.tableTitle.push({shopName: "村庄"});
            }else if (this.attributeList[i].乡镇 != undefined){
              this.tableTitle.push({shopName: "乡镇"});
            }

            for (let attributeDataElement of this.attributeDataList) {

              //添加数据到表格显示
              var title = {shopName: attributeDataElement};
              this.tableTitle.push(title);

              attribute = [];
              if (this.attributeList[i].村庄 != undefined){
                attribute.push(this.attributeList[i].村庄);
              }else if (this.attributeList[i].乡镇 != undefined){
                attribute.push(this.attributeList[i].乡镇);
              }

            }

            //添加表格内容数据
            this.titleData1 = {};
            let titleData1 ={};
            for (let tableTitleElement of this.tableTitle) {
              var table = tableTitleElement.shopName;
              titleData1[table] = this.attributeList[i][table];
            }
            this.tableDataList.push(titleData1);
            this.tableDataShowList = this.tableDataList;

          }

        }
      },
			
			//获取选中属性名称
      attributeChange(attributeName) {

        this.natureArray = [];
        this.attributeDataList = [];

        this.natureArray = attributeName;
				this.attributeDataList = attributeName;
			
				//this.attributeList

        //判断是二维 还是三维
        this.getPointData(dataList);

        if (this.borderactive == "1"){
          this.echartsData(this.type);
        }else if (this.borderactive == "4"){
          this.popupData();
        }

			},
			
			//获取属性信息
      getAttribute(attribute) {

        this.attributeList = [];

        this.attributeList = attribute;
        var attr1 = this.attributeList[0];
        var dataListNew = [];
        // if (window.viewer.entities._entities.length != 0){
        //
        // }
        //清空点位信息
        window.viewer.entities.removeAll();

        this.intImg1 = this.intImg1 + 1;
        let myDataSource = new Cesium.CustomDataSource("traceLayer");
        // 聚合
        let dataSourcePromise = window.viewer.dataSources.add(myDataSource)
        dataSourcePromise.then( dataSource => {

          for (let i = 0; i < this.attributeList.length; i++) {
            let row = this.attributeList[i];
            let lon;
            let lat;

            if (this.tucengType == "Point") {//点
              if (row.the_geom != undefined) {
                let sp = row.the_geom.split("(")[1].split(" ")
                lon = sp[0];
                /*lat = sp[1].substring(0, attr1.the_geom.split(
                    "(")[1].split(" ")[1].length - 1);*/
                lat = row.the_geom.split("(")[1].split(" ")[1].split(")")[0];
              } else {
                lon = row.geom.split("(")[1].split(" ")[0];
                /*lat = row.geom.split("(")[1].split(" ")[1].substring(0, attr1.geom.split(
                    "(")[1].split(" ")[1].length - 1);*/
                lat = row.geom.split("(")[1].split(" ")[1].split(")")[0];
              }
            } else if (this.tucengType == "MultiPolygon") {//面
              if (row.the_geom != undefined) {

                let degreesArrayHeights = this.getDegreesArrayHeights(row.the_geom, 150);
                //面获取中心点
                var n = Cesium.Cartographic.fromCartesian(
                    Cesium.BoundingSphere.fromPoints(
                        Cesium.Cartesian3.fromDegreesArrayHeights(degreesArrayHeights)).center);
                lon = Cesium.Math.toDegrees(n.longitude);
                lat = Cesium.Math.toDegrees(n.latitude);

                /*var lon = this.attributeList[i].the_geom.split("(((")[1].split(" ")[0];
              var lat = this.attributeList[i].the_geom.split("(((")[1].split(" ")[1].split(",")[0];*/
              } else {
                let degreesArrayHeights = this.getDegreesArrayHeights(row.geom, 150);
                //面获取中心点
                var n = Cesium.Cartographic.fromCartesian(
                    Cesium.BoundingSphere.fromPoints(
                        Cesium.Cartesian3.fromDegreesArrayHeights(degreesArrayHeights)).center);
                lon = Cesium.Math.toDegrees(n.longitude);
                lat = Cesium.Math.toDegrees(n.latitude);

                /*var lon = this.attributeList[i].geom.split("(((")[1].split(" ")[0];
              var lat = this.attributeList[i].geom.split("(((")[1].split(" ")[1].split(",")[0];*/
              }
            }

            this.updateBillBord(row, i, lon, lat, dataSource);

            var data = {
              id: i,
              lon: lon,
              lat: lat,
              alt: 0
            }
            dataListNew.push(data);
          }
          this.afterAddDataSource(dataSource)
        })
        dataList = dataListNew;
        //this.getPointData(dataList);

      },
      // 添加billbord图标
      updateBillBord(row, i,lon,lat,dataSource){
        let textName = "";
        if (row.name != undefined){
          textName = row.name;
        }else if (row['物理站'] != undefined){
          textName = row['物理站'];
        }else if (row['站点名'] != undefined){
          textName = row['站点名'];
        }else if (row['医院分'] != undefined){
          textName = row['医院分'];
        }else if (row['监控点'] != undefined){
          textName = row['监控点'];
        }else if (row['分类名'] != undefined){
          textName = row['分类名'];
        }else {
          textName = "";
        }/*else if (row.objname != undefined){
          textName = row.objname;
        }*/
        //row.lon = parseFloat(lon)
        //row.lat = parseFloat(lat)

        //随机获取图片
        let requireImg = '';
        if (this.intImg1 % 5 == 0) {
          requireImg = require('../../../../static/img/round2.png');
        }else if (this.intImg1 % 5 == 1){
          requireImg = require('../../../../static/img/round3.png');
        }else if (this.intImg1 % 5 == 2){
          requireImg = require('../../../../static/img/round4.png');
        }else if (this.intImg1 % 5 == 3){
          requireImg = require('../../../../static/img/round5.png');
        }else if (this.intImg1 % 5 == 4){
          requireImg = require('../../../../static/img/round6.png');
        }

        //再添加点位图标
        let obj = {
          ids: i,
          pickLon: lon,
          pickLat: lat,
          position: Cesium.Cartesian3.fromDegrees(parseFloat(lon), parseFloat(lat), 300),
          billboard: {
            id: i,
            attribute: row,
            //image: require("../../../../static/img/round.png"),
            image: requireImg,
            width: 25,
            height: 25
          },
          /*label: {
            text: textName,
            font: "10px",
            fillColor: Cesium.Color.BLUE,
            pixelOffset: new Cesium.Cartesian2(0, -24), // default: (0, 0)
          }*/
        };
        if(textName != ""){
          obj.label = {
            text: textName,
            font: "10px",
            fillColor: Cesium.Color.BLUE,
            pixelOffset: new Cesium.Cartesian2(0, -24), // default: (0, 0)
          }
        }
        // window.viewer.entities.add(obj);

        dataSource.entities.add(obj);
      },
      // 更新详细信息弹窗

      //获取坐标串
      getDegreesArrayHeights(the_geom, height) {
        the_geom = the_geom.replaceAll('(','')
        the_geom = the_geom.replaceAll(')','')
        the_geom = the_geom.replaceAll(', ',',')
        if (the_geom.includes( "MULTIPOLYGON")) {
          the_geom =   the_geom.replace('MULTIPOLYGON ','')
        }  if (the_geom.includes( "POLYGON")) {
          the_geom = the_geom.replace('POLYGON ','')
        }
        let degreesArrayHeights = [];
        let coordinates = the_geom.split(',')
        for (let i = 0; i < coordinates.length; i++) {
          const element = coordinates[i].split(' ');
          degreesArrayHeights.push(Number(element[0]));
          degreesArrayHeights.push(Number(element[1]));
          degreesArrayHeights.push(height || 0);
        }
        return degreesArrayHeights;
      },
			
			//获取图层
      natureChange(name, oldLayers, ids) {

        this.tucengname = ids;

        if (name.length == 0){
          this.clearAll(oldLayers);
          this.mapTab(0,{layers:['vec']});
        }


        this.oldLayer = oldLayers;

        //this.resetNew();

        //this.clearAll(oldLayers);

        //清空表格数据
        this.tableDataList = [];
        this.tableDataShowList = [];
        this.tableTitle = [];

      },

			// 获取业务点位数据-HTML风格
      getPointData(dataList) {
        let that = this
        that.pointList = [];
        for (let i = 0; i < dataList.length; i++) {
          dataList[i].alt = 0
          let htmlOverlay = document.createElement('div')
          htmlOverlay.style.position = 'absolute'
          htmlOverlay.style.width = '250px';
          htmlOverlay.style.height = '150px';
          //htmlOverlay.style.background = 'black';
          htmlOverlay.id = dataList[i].id
          htmlOverlay.className = 'position'
          htmlOverlay.style.borderRadius = '10px';
          htmlOverlay.style.backgroundColor = "rgba(1,10,20,0.05)"
          htmlOverlay.innerHTML = '<div id="' + dataList[i].id +
              '"  class="position-body"></div>'
          window.viewer.container.appendChild(htmlOverlay)

          that.pointList.push(dataList[i]);
          that.pointListSelect = that.pointList;

        }
      },
			// 清除业务点位数据-html标签
			clearPointList() {
				for (let i = 0; i < this.pointList.length; i++) {
					let item = this.pointList[i]
					let htmlOverlay = document.getElementById(item.id)
					if (htmlOverlay) {
						window.viewer.container.removeChild(htmlOverlay)
					}
				}
				this.pointList = [];
			},
      clearPointListSelect() {
        for (let i = 0; i < this.pointListSelect.length; i++) {
          let item = this.pointListSelect[i]
          let htmlOverlay = document.getElementById(item.id)
          if (htmlOverlay) {
            window.viewer.container.removeChild(htmlOverlay)
          }
        }
        this.pointListSelect = [];
      },

			//顶级按钮切换
			dvBoxClick(v) {
				this.dvBoxFlag = v;
				this.getCollectAll();

        //纠错
        if (this.dvBoxFlag == 'error') {
          this.operation = '1';
          this.getselectCatalogueTree();
        }
			},
      dvBoxTwoClick(v) {
        this.dvBoxTwoFlag = v;

        if (v != 'choice'){
          this.$refs.electricalLists.getChage(0);
        }

        if (v == 'first2') {
          this.drawPointLinePlane1('first');
        } else if (v == 'second2') {
          this.drawPointLinePlane1('second');
        } else if (v == 'third2') {
          this.drawPointLinePlane1('third');
        } else if (v == 'error1') {
          this.getErrorAll();
        } else if (v == 'first2') {
          this.drawPointLinePlane1('first');
        } else if (v == 'second2') {
          this.drawPointLinePlane1('second');
        } else if (v == 'third2') {
          this.drawPointLinePlane1('third');
        }

      },
      dvBoxThreeClick(v) {
        this.dvBoxThreeFlag = v;
        if (v == 'tianjia') {
          this.drawAdd();
        } else if (v == 'xuanze') {
          this.draw();
        }
      },
      //地图出图
      png() {
        let exportFile = new xt3d.SceneDominate.ExportFile(window.viewer);
        exportFile.exportImage();
      },
      draw(){
        var handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
        handler.setInputAction( movement => {
          var pick = window.viewer.scene.pick(movement.position);

          var ellipsoid = window.viewer.scene.globe.ellipsoid;
          var cartesian3 = new Cesium.Cartesian3(parseFloat(pick.primitive._position.x), parseFloat(
              pick.primitive._position.y), parseFloat(pick.primitive._position.z));
          var cartographic = ellipsoid.cartesianToCartographic(cartesian3);
          var lat = Cesium.Math.toDegrees(cartographic.latitude);
          var lng = Cesium.Math.toDegrees(cartographic.longitude);

          this.plott = lng + ',' + lat;

          window.viewer.entities.add({
            lable: pick.id.lable,
            position: Cesium.Cartesian3.fromDegrees(parseFloat(lng), parseFloat(lat), 10),
            billboard: {
              image: require("./img/dot.png"),
              width: 50,
              height: 50
            }
          });

        },Cesium.ScreenSpaceEventType.LEFT_CLICK);
      },
      drawAdd(){
        let handlerLocation = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
        handlerLocation.setInputAction(movement => {
          var position = window.viewer.scene.camera.pickEllipsoid(movement.position, window.viewer.scene.globe
              .ellipsoid);
          var ellipsoid = window.viewer.scene.globe.ellipsoid;
          var cartesian3 = new Cesium.Cartesian3(parseFloat(position.x), parseFloat(position.y),
              parseFloat(position.z));
          var cartographic = ellipsoid.cartesianToCartographic(cartesian3);
          this.lat = Cesium.Math.toDegrees(cartographic.latitude).toString().substring(0, 7);
          this.lng = Cesium.Math.toDegrees(cartographic.longitude).toString().substring(0, 7);

          this.plott = this.lng + ',' + this.lat;

          window.viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(parseFloat(this.lng), parseFloat(this.lat), 10),
            billboard: {
              image: require("./img/dot.png"),
              width: 50,
              height: 50
            }
          });
          handlerLocation.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      },
			//画点线面方法
			drawPointLinePlane1(value) {
				//3d标点
				if (drawHandleTool.stop) {
					drawHandleTool.stop = false;
				}
				let _that = this;
				if (value == "first") {
					_that.type = "1";
					drawHandleTool.draw({
							color: Cesium.Color.RED,
							pixelSize: 10,
							disableDepthTestDistance: Number.POSITIVE_INFINITY,
						},

						function callback(entity) {
							_that.plott = entity.position._value.toString();


						},
						Cesium.EV_DrawType.POINT
					);
				} else if (value == "second") {
					_that.type = "2";
					drawHandleTool.draw({
							material: Cesium.Color.RED,
							width: 10,
						},
						function callback(entity) {
							_that.plott = entity.positions.toString();

						},
						Cesium.EV_DrawType.POLYLINE
					);
				} else if (value == "third") {
					_that.type = "3";
					drawHandleTool.draw({
							material: Cesium.Color.GREEN,
						},
						function callback(entity) {
							_that.plott = entity.positions.toString();


						},
						Cesium.EV_DrawType.POLYGON
					);
				}
			},

			//查询所以收藏
			getCollectAll() {
				$axios({
					url: '/online/collect/getCollectAll',
				}).then(res => {

					if (res.code == 200) {
						this.optionsChoice = res.data;
					}
				})
			},
			//选择收藏项
			changeCollection(v) {
				this.valueChoiceId = v;
				for (let i = 0; i < this.optionsChoice.length; i++) {
					if (this.optionsChoice[i].id == v) {
            window.viewer.scene.camera.flyTo({
              destination: new Cesium.Cartesian3.fromDegrees(parseFloat(this.optionsChoice[i].longitude),
                  parseFloat(this.optionsChoice[i].latitude), parseFloat(this.optionsChoice[i]
                      .height))
            });

						/*window.viewer.camera.setView({
							destination: Cesium.Cartesian3.fromDegrees(parseFloat(this.optionsChoice[i].longitude),
								parseFloat(this.optionsChoice[i].latitude), parseFloat(this.optionsChoice[i]
									.viewHeight))
						});*/
						this.$refs.electricalLists.getChage(this.optionsChoice[i].thematicMapId);
					}
				}
				this.dvBoxClick('');
				//this.dvBoxTwoClick('');
			},
			//删除收藏
			delCollection() {
				if (this.valueChoice == '') {
					$axios({
						url: 'online/collect/delCollect/this.valueChoice',
					}).then(res => {

					})
				}
			},
			//添加收藏
			addCollection() {

        if(this.borderactive == '4' ){
          var rectangle = window.viewer.camera.computeViewRectangle();
          var west = rectangle.west / Math.PI * 180;
          var north = rectangle.north / Math.PI * 180;
          var east = rectangle.east / Math.PI * 180;
          var south = rectangle.south / Math.PI * 180;
          var curLongitude = (west + east) / 2;
          var curLatitude = (north + south) / 2;
        }else  {
          // 获取当前地图中心的经纬度
          let centerResult = window.viewer.camera.pickEllipsoid(
              new Cesium.Cartesian2(
                  window.viewer.canvas.clientWidth / 2,
                  window.viewer.canvas.clientHeight / 2,
              ),
          )
          var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(centerResult);
          var curLongitude = (curPosition.longitude * 180) / Math.PI;
          var curLatitude = (curPosition.latitude * 180) / Math.PI;

        }

				let thematicMapId = '';
				thematicMapId = this.tucengname.toLocaleString();
				
				if (heightA == undefined) {
					heightA = 0;
				}
				if (this.collectionName != '') {
					$axios({
						method: 'POST',
						url: '/online/collect/addCollect',
						data: {
							id: Number(Math.random().toString().substr(3, 3) + Date.now()),
							collectName: this.collectionName,
							longitude: curLongitude.toString(),
							latitude: curLatitude.toString(),
							height: heightA,
							viewHeight: viewHeight,
							viewDirection: viewDirection,
							anglePitch: anglePitch,
							thematicMapId: thematicMapId
						}
					}).then(res => {

						if (res.code == 200) {
							this.$message({
								message: '操作成功',
								type: 'success'
							});
							this.dvBoxTwoClick('');
							this.getCollectAll();
						}
					})
				}
			},
			changeError(v) {
				for (let i = 0; i < this.optionsError.length; i++) {
					if (this.optionsError[i].value == v) {
						this.serviceName = this.optionsError[i].label;
						this.serviceId = this.optionsError[i].value;
					}
				}
        $axios({
          url:'/data/dataService/selectPage',
          method: 'get',
          params: {
            'current': 1,
            'size': 100,
            'serviceName': "",
            'startTime': "",
            'endTime': ""
          },
          headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
        }).then(data=>{
          if(data.code == '200'){
              for(let i=0;i<data.data.records.length;i++){
                if(data.data.records[i].servName == this.serviceName){
                  this.personId = data.data.records[i].creator;
                  this.person = data.data.records[i].createName;
                  this.serviceType = '数据服务';
                  this.serviceDepartment = data.data.records[i].creatorDepartmentName;
                  this.serviceTopics = data.data.records[i].servKeyword;

                  if(data.data.records[i].servState == 1){
                    data.data.records[i].servState == '开启'
                  }else {
                    data.data.records[i].servState == '关闭'
                  }
                  this.serviceStatus = data.data.records[i].servState;
                }else {
                  this.personId = this.$store.state.Authentication.uid;
                  this.person = this.$store.state.Authentication.virtualName;
                }
              }
          }else {
            this.personId = this.$store.state.Authentication.uid;
            this.person = this.$store.state.Authentication.virtualName;
          }
        })

        //根据id获取年份信息
        this.optionsErrorYear = [];
        selectCatalogueById(this.serviceId).then(res => {
          let dataAll = res.data;
          let time = dataAll.dataGenerationTime;
          let timeList = time.split(",");
          this.isPolymerization = dataAll.isPolymerization;
          this.valueErrorYear = timeList[timeList.length - 1];
          for (let timeListElement of timeList) {
            let data = {
              value: timeListElement,
              label: timeListElement
            }
            this.optionsErrorYear.push(data);
          };
          this.layeData();
        })

			},
      changeErrorYear(){
        this.layeData();
      },
      layeData(){
        window.viewer.entities.removeAll();

        getFeatureByJson(this.serviceName, this.valueErrorYear,this.isPolymerization).then(res => {
          if(res.status == 200){
            let data = res.data.result[0].featureCollection;
            for (let i = 0; i < data.length; i++) {
              let sp = data[i].geom.split("(")[1].split(" ")
              let lng = sp[0];
              let lat = sp[1].substring(0, data[i].geom.split(
                  "(")[1].split(" ")[1].length - 1);

              window.viewer.entities.add({
                lable:  data[i],
                position: Cesium.Cartesian3.fromDegrees(parseFloat(lng), parseFloat(lat), 10),
                billboard: {
                  image: require("./img/dot.png"),
                  width: 31,
                  height: 31
                }
              });
            }
          }
        })
      },
			//纠错保存
			errorSave() {
				this.correctorId = this.$store.state.Authentication.uid;
				this.corrector = this.$store.state.Authentication.virtualName;
				$axios({
					method: 'POST',
					url: '/online/errorCorrection/addErrorCorrection',
					data: {
						id: Number(Math.random().toString().substr(3, 3) + Date.now()),
						type: this.type,
						plott: this.plott,
						plottText: this.errorTextarea,
						phone: this.errorPhone,
						email: this.errorMailbox,
						correctorId: parseInt(this.correctorId),
						corrector: this.corrector,
						unit: this.unit,
						address: this.address,
						serviceId: this.serviceId,
						serviceName: this.serviceName,
						serviceType: this.serviceType,
						serviceDepartment: this.serviceDepartment,
						serviceTopics: this.serviceTopics,
						serviceStatus: this.serviceStatus,
						personId: this.personId,
						person: this.person,
						errorDate: this.$moment(this.errorDate).format("YYYY-MM-DD"),
						state: this.state,
						kind: "2",
					}
				}).then(res => {


					if (res.code == 200) {
						this.Clear();
						this.dvBoxClick('');
						this.getErrorAll();
						this.$message({
							message: '操作成功',
							type: 'success'
						});
					}
				})
			},
			//查询纠错记录
			getErrorAll() {
				this.errorData = []; // 清空纠错记录数组
				$axios({
					url: '/online/errorCorrection/getErrorCorrectionAll',
				}).then(res => {

					if (res.code == 200) {
						for (let i = 0; i < res.data.length; i++) {
							if (res.data[i].kind == '2' && this.$store.state.Authentication.virtualName == res
								.data[i].corrector) {
								this.errorData.push(res.data[i]);
							}
						}
					}
				})
			},
      getselectCatalogueTree() {
        //查询所有图层
        this.optionsError = []; // 清空纠错记录数组
        $axios({
          url: '/plott/catalogue/selectCatalogueTree/0',
        }).then(res => {
          if (res.code == 200) {
            for (let i = 0; i < res.data.length; i++) {
              for (let j = 0; j < res.data[i].catalogueVos.length; j++) {
                let arr = {
                  value: res.data[i].catalogueVos[j].id,
                  label: res.data[i].catalogueVos[j].name
                }
                this.optionsError.push(arr);
              }
            }
          }
        })
      },
			//清除
			Clear() {
				// 3d标绘
				//禁用绘制工具
				// drawHandleTool.stop = true;
				//清理绘制的图形
				// drawHandleTool.clear();
				// analysis.clear();

				this.dvBoxTwoClick('');
			},
      webGlobe() {
        let that = this
        window.xt3dInit = {
          init(el){
            this.initViewer(el)
            // that.add3DTiles();
            // 切换视角
            // that.setInitView();

          },
          initViewer(el) {
            const basemapLayer = that.basemapLayers[0]
            const vecProvider = that.getLayer(basemapLayer.layers[0])
            const cavProvider = that.getLayer(basemapLayer.layers[1])
            // const vecQuanyuProvider = that.getLayer(basemapLayer.layers[2])
            // const vecChengquProvider = that.getLayer(basemapLayer.layers[3])

            //加载地图
            window.viewer = new Cesium.Viewer(el, {
              imageryProvider: vecProvider,
              animation: false,
              baseLayerPicker: false,
              fullscreenButton: false,
              geocoder: false,
              homeButton: false,
              infoBox: false,
              sceneModePicker: false,
              selectionIndicator: false,
              timeline: false,
              navigationHelpButton: false,
              sceneMode: 1, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode //2D 3D转换
              contextOptions: {               //通过canvas.toDataURL()实现截图需要将该项设置为true
                webgl: {
                  alpha: true,
                  depth: false,
                  stencil: true,
                  antialias: true,
                  premultipliedAlpha: true,
                  preserveDrawingBuffer: true,
                  failIfMajorPerformanceCaveat: true
                },
                allowTextureFilterAnisotropic: true
              }
            })
            if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {//判断是否支持图像渲染像素化处理
              window.viewer.resolutionScale = window.devicePixelRatio;
            }
            //是否开启抗锯齿
            window.viewer.scene.fxaa = true;
            window.viewer.scene.postProcessStages.fxaa.enabled = true;

            // window.viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0)
            // window.viewer.scene.globe.baseColor = new Cesium.Color(1.0, 1.0, 1.0, 1.0)
            // 文字无遮挡
            window.viewer.cesiumWidget.creditContainer.style.display = "none";
            //实体不遮挡
            window.viewer.scene.globe.depthTestAgainstTerrain = false;
            //相机的高度的最小值
            window.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 50;
            // window.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 60000;
            basemapLayer.layers[0].provider = window.viewer.imageryLayers.get(0)
            basemapLayer.layers[1].provider = window.viewer.imageryLayers.addImageryProvider(cavProvider)
            // basemapLayer.layers[2].provider = window.viewer.imageryLayers.addImageryProvider(vecQuanyuProvider)
            // basemapLayer.layers[3].provider = window.viewer.imageryLayers.addImageryProvider(vecChengquProvider)
            // 地形
            // let terrainProvider = new Cesium.CesiumTerrainProvider({
            //   url: 'http://192.168.8.200/luanzhou/map_cache/DEM_Cache'
            // });
            // window.viewer.terrainProvider = terrainProvider
            // that.add3DTiles();
          }
        }

        window.xt3dInit.init("mapDiv")
        // 切换视角
        that.setView();

        let handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
        handler.setInputAction(movement => {
          let pick = window.viewer.scene.pick(movement.position);
          that.clearPointListSelect()
          this.pickId = pick.id.ids;
          let data = {
            id: pick.id.ids,
            lon: Number(pick.id.pickLon),
            lat: Number(pick.id.pickLat),
            alt: 0
          }
          let att = that.attributeList[pick.id.ids];
          let htmlOverlay = document.createElement('div')
          htmlOverlay.id = pick.id.ids;
          htmlOverlay.style.color = 'black';
          htmlOverlay.style.position = 'absolute'
          htmlOverlay.style.width = '365px';
          htmlOverlay.style.height = '218px';
          htmlOverlay.className = 'position';
          htmlOverlay.style.backgroundColor = "rgba(44,132,132,0.4)"
          htmlOverlay.style.borderRadius = '10px'

          let htmlStr='<div class="position" id="' + pick.id.ids + '" style="height: 128px;overflow-y: scroll;\n' +
              '    width: 280px;\n' +
              'padding: 26px 40px;">';
          let title = "";
          if (att.村庄 != undefined){
            title = att.村庄;
          }else if (att.乡镇 != undefined){
            title = att.乡镇;
          }
          Object.keys(att).forEach(key => {
            if (key == "geom" || key == "the_geom"){
              return
            }
            htmlStr += '<div style="text-align: left;"><span style="font-weight: bolder;">'+ key +'</span>'
                + ":" + '<span style="font-weight: bolder;font-size: 14px;"> '+ att[key] + '</span></div>'
          })
          htmlStr += '</div>';
          htmlOverlay.innerHTML = htmlStr
          window.viewer.container.appendChild(htmlOverlay)
          that.pointListSelect.push(data)

        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        //根据经纬度 弹窗显示Echarts
        // 业务数据标签监听  每一帧都去计算气泡的正确位置
        window.viewer.scene.preRender.addEventListener(function () {
          // if(that.dvBoxFlag != 'Chart' ||  that.chart != 'label'){
          //   return
          // }
          // 更新业务图标
          if (that.pointListSelect.length > 0) {
            let data = that.pointListSelect
            for (let i = 0; i < data.length; i++) {
              let item = data[i]
              let htmlOverlay = document.getElementById(item.id+'')
              if(!htmlOverlay){
                continue
              }
              let windowPosition = new Cesium.Cartesian2()
              let scenePosition = Cesium.Cartesian3.fromDegrees(item.lon, item.lat, item.alt)
              Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, scenePosition,
                  windowPosition)
              htmlOverlay.style.top = windowPosition.y - 140 + 'px'
              htmlOverlay.style.left = windowPosition.x - 100 + 'px'
            }
          }
        });

        //鼠标滚动监听
        handler.setInputAction(function (wheelment) {
          if (!window.dataSource) {
            return
          }
          // 获取高度
          let height = Math.ceil(window.viewer.camera.positionCartographic.height)
          if (height < 3000) {
            window.dataSource.clustering.enabled = false;
          } else {
            window.dataSource.clustering.enabled = true;
            window.dataSource.clustering.pixelRange = 0;
            window.dataSource.clustering.pixelRange = 70;
          }
        }, Cesium.ScreenSpaceEventType.WHEEL);

      },
      // 根据配置文件生产图层
      getLayer(layer){
        let newlayer=null
        switch (layer.type){
          case 1:// XY切片图层
            newlayer= new Cesium.UrlTemplateImageryProvider(layer.param);
            break;
          case 2:// 地形图层
            newlayer = new Cesium.CesiumTerrainProvider(layer.param);
            break;
        }
        return newlayer
      },
      // 添加倾斜摄影图层
      add3DTiles() {
        let that = this
        // 添加倾斜摄影图层
        let tileset = new Cesium.Cesium3DTileset({
          //url: 'http://172.16.210.4/mapcache/tiles_cache/tileset.json'
          url: 'http://127.0.0.1/static/haigangqu/tiles_cache/tileset.json'
        });
        const layers_3d_1 = window.viewer.scene.primitives.add(tileset);
      },
			setView() {
				window.viewer.scene.camera.flyTo({
          destination: new Cesium.Cartesian3.fromDegrees(118.99308532, 39.22000372,50000),
					duration: 0,
					orientation: {
						heading: 0,
						pitch: -1.57,
						roll: 0
					},
					complete: function callback() {}
				})
			}
		},
		watch: {

		  //监听搜索
      inputValue(value){
        if (value == ""){
          this.tableDataList = this.tableDataShowList;
        }else {
          let searchList = [];
          let value1 = value.replace(/\s/gi, "");
          let searchArr = this.tableDataShowList;
          searchArr.forEach((e) => {
            for (let tableTitleElement of this.tableTitle) {
              let title = e[tableTitleElement.shopName];
              if (title.includes(value1)){
                searchList.push(e);
              }
            }
            this.tableDataList = searchList;
          })

        }
      },

		  //获取年份
		  /*year(value){
		    getFeatureByJson(this.tuceng, value).then(res => {
			    if(res.status == 200){
				    var attribute = res.data.result[0];
				    this.attributeList = attribute.featureCollection;
				    this.echartsData(this.type);
			    }
		    });
	
		  },		*/
		  //监听Echarts类型变化
		  chart(value){
		    if (value == "bar"){ //柱状图
		      //根据属性名称获取数据信息
		      this.echartsData(value);
		    }else if (value == "line"){ //折线图
		      //根据属性名称获取数据信息
		      this.echartsData(value);
		    }else if (value == "pie"){ //饼状图
		      this.echartsData(value);
		    }else if (value == "label"){ //label
          this.echartsData(value);
        }
		  }		
		}
	};
</script>

<style scoped>

.theSteps >>> .el-step__head.is-process{
  color: #1e74ff;
  border-color: #1e74ff;
}
.theSteps >>> .el-step__title.is-process{
  color: #1e74ff;
}

/*.theSteps >>> .el-step__head.is-success{
  color: #C0C4CC;
  border-color: #C0C4CC;
}
.theSteps >>> .el-step__title.is-success{
  color: #C0C4CC;
}*/

.theSteps >>> .el-step__head.is-finish{
  color: #C0C4CC;
  border-color: #C0C4CC;
}
.theSteps >>> .el-step__title.is-finish{
  color: #C0C4CC;
}

</style>

<style lang="scss" scoped>

.el-step__head:hover {
  color: #67c23a;
  border-color: #67c23a;
}

.position-body ::-webkit-scrollbar {
  display: none;
}

.bubble {
  text-align: center;
  position: absolute;
  margin: 0;
  background: url("../../../../static/img/bgPopup.png") no-repeat;
  background-size: cover;
  width: 330px;
  height: 198px
}
.bubble-top{
  text-align : right;
  padding-top: 15px;
}
.bubble-top-title{
  color: #fff;
  position: absolute;
  left: 30px;
  top: 10px;
  font-weight: 500;
  font-size: 18px;
}
.bubble-top-close{
  color: darkgrey;
  padding-right:10px
}
.bubble-table{
  width: 90%;
  padding-left: 9%;
}
.bubble float{
  right: 2%;
  top: 2%;
}

.map-layers-cut {
  width: 310px;
  height: 80px;
  position: absolute;
  z-index: 999;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  //background-color: rgba(10, 54, 70, 0.7);
  border: 1px solid #005aca;

  .map-layers-div {
    width: 65px;
    height: 65px;
    margin: 0 5px;
    position: relative;
    border: 1px solid #f3f3f3;
    box-sizing: border-box;

    .map-layers-img {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
    }

    .map-layers-title {
      display: block;
      position: absolute;
      z-index: 9;
      left: 0;
      bottom: 0;
      padding: 2px 6px;
      background-color: #111111;
      color: #ffffff;
    }

    &:hover {
      cursor: pointer;
      border: 1px solid #0081ff;

      .map-layers-title {
        background-color: #0081ff;
      }
    }
  }

  .map-layers-div-active {
    border: 1px solid #0081ff;
    box-sizing: border-box;

    .map-layers-title {
      background-color: #0081ff;
    }
  }
}

	.map {
		display: flex;
		position: relative;
		margin: 0 -20px 0px -20px;
		height: calc(100vh - 160px);
		background-color: #000000;

		.map-search {
			position: absolute;
			padding: 0 10px;
			z-index: 9;
			top: 5px;
			left: 340px;
			width: 320px;
		}

		.map-view {
			position: relative;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
	}

	.maplist-right {
		position: absolute;
		top: 0;
		right: 0;

		.cut {
			width: 80px;
			float: left;
			position: absolute;
			top: 2px;
			right: 20px;
			z-index: 999;

			::v-deep .el-radio {
				margin: 5px 0;
				padding: 10px;
				color: #409eff;
				background-color: #fff;
				border-radius: 5px;

				.el-radio__input.is-checked+.el-radio__label {
					color: #111 !important;
				}

				.el-radio__inner:hover {
					border-color: #dcdfe6;
				}

				.el-radio__input.is-checked .el-radio__inner {
					background: #fff !important;
				}

				.el-radio__input.is-checked .el-radio__inner::after {
					width: 5px;
					height: 5px;
					background-color: #409eff !important;
				}
			}
		}
	}

	.time-line {
		width: 400px;
		height: 30px;
		background-color: #c7c7c7c9;
		padding: 10px 50px 30px 50px;
		border-radius: 5px;
		position: absolute;
		top: 65px;
		right: 150px;
		z-index: 999;
	}
	
	.bar1 {
		position: absolute;
		top: 200px;
		left: 500px;
	}
	
	.bar2 {
		position: absolute;
		top: 200px;
		left: 800px;
	}
	
	.bar3 {
		position: absolute;
		top: 300px;
		left: 600px;
	}
	
	.position-title,
	.position-title::before,
	.position-title::after {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}


.listDiv2 {
  overflow:auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.46), 0 0 6px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background-color: #FFFFFF;
  position: absolute;
  bottom: 3%;
  left: 24%;
  z-index: 9;
  width: 50%;
  height: 46px;
}

  .listDiv {
    overflow:auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.46), 0 0 6px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background-color: #FFFFFF;
    position: absolute;
    top: 100px;
    right: 10px;
    z-index: 9;
    width: 330px;
    height: 450px;
  }

	.buttonBox {
		position: absolute;
		top: 10px;
		right: 100px;
		z-index: 9;
		width: 600px;
	}

	//按钮
	.dv-border-box {
		float: right;
		margin: 5px;
		height: 40px;
		width: 70px;
		text-align: center;
		border: 1px solid #FFFFFF;
		background-color: rgb(0, 90, 202);
		border-radius: 10px;
	}

	.dv-border-box span {
		position: relative;
		top: 25%;
		font-size: 14px;
		color: #FFFFFF;
		// background-color: red;
	}

	//活动按钮
	.dv-border-box-select {
		float: right;
		margin: 5px;
		height: 40px;
		width: 70px;
		text-align: center;
		border: 1px solid #FFFFFF;
		background-color: #DDEE33;
		border-radius: 10px;
	}

	.dv-border-box-select span {
		position: relative;
		top: 25%;
		font-size: 14px;
		color: #000000;
		// background-color: red;
	}

	.operationBox {
		position: absolute;
		right: 0px;
		top: 60px;
		width: 500px;
		text-align: right;
	}

	// rgba(63, 94, 127,0.7)
	.lsw-index-error-box {
		position: absolute;
		padding: 5px;
    top: 10px;
		right: 0px;
		border: 1px solid #005aca;
		height: 480px;
    background-color: #F5F7FA;
    border-radius: 4px;
		z-index: 9;
		color: black;
		width: 300px;
		margin-top: 50px;
	}

	.lsw-pop-up-box {
		position: relative;
		padding: 5px;
		margin-top: 10px;
		right: 0px;
		border: 1px solid #005aca;

		background-color: rgba(10, 54, 70, 0.7);
		z-index: 9;
		color: #FFFFFF;
	}

	//滚动条
	.lsw-scroll {
		overflow-y: scroll;
	}

	.lsw-scroll::-webkit-scrollbar {
		display: none;
	}

	//按钮
	.dv-border-box1 {
    position: relative;
    right: 0px;
		float: right;
		z-index: 99;
		margin: 5px;
		height: 40px;
		width: 70px;
		text-align: center;
		// border: 1px solid #FFFFFF;
		// background-color: rgb(0, 90, 202);
		border-radius: 10px;
	}

	.dv-border-box1 div {
		position: relative;
		top: 15%;
		font-size: 12px;
		color: black;
		// background-color: red;
	}

	//活动按钮
	.dv-border-box1-select {
    position: relative;
    right: 0px;
		float: right;
		z-index: 99;
		margin: 5px;
		height: 40px;
		width: 70px;
		text-align: center;
		// border: 1px solid #FFFFFF;
		// background-color: #DDEE33;
		border-radius: 10px;
	}

	.dv-border-box1-select div {
		position: relative;
		top: 15%;
		font-size: 12px;
		color: #DDEE33;
		// background-color: red;
	}

	.lsw-split-line {
    position: relative;
    right: 0px;
    float: right;
		background-color: #005aca;
		margin-top: 6px;
		width: 1px;
		height: 35px;
	}
</style>

<style>
/*
隐藏滚动条 可以滚动
*/
.position::-webkit-scrollbar {
  width: 0 !important
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track{
  background-color: #e5e9ea;
}
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background-color: #cecbcb;
}


</style>
